<template>
  <div>
    <van-dropdown-menu>
      <van-dropdown-item disabled title="综合" />
      <van-dropdown-item
        @change="priceChange"
        title="价格"
        v-model="priceVal"
        :options="priceArr"
      />
      <van-dropdown-item
        title="分类"
        v-model="categoryVal"
        :options="filterCategory"
        @change="categoryChange"
      />
    </van-dropdown-menu>
    <van-empty
      v-if="goodsList.length == 0"
      image="search"
      description="您搜索的产品不存在"
    />
    <product v-else :goodsList="goodsList"></product>
  </div>
</template>

<script>
import product from './product.vue'
export default {
  // 这里分类filterCategory的是给 van-dropdown-item title="分类"
  // goodsList还需要往下传，给product才对
  props: ['goodsList', 'filterCategory'],
  name: 'myproduct',
  components: {
    product
  },
  data () {
    return {
      priceVal: 0,
      categoryVal: 1005000,
      // 价格下拉菜单的当前项
      priceArr: [
        { text: '价格由高到低', value: 'desc' },
        { text: '价格由低到高', value: 'asc' }
      ]
    }
  },
  mounted () {
    // 遍历目标数组
    this.filterCategory.map((val, index) => {
      if (val.checked) {
        this.categoryVal = val.value
      }
    })
  },
  methods: {
    // 分类下拉框的点击
    categoryChange (val) {
      console.log(val)
      this.$emit('categoryChange', val)
    },
    // 价格下拉框的点击事件
    priceChange (val) {
      this.$emit('priceChange', val)
    }
  }
}
</script>

<style lang="less" scoped></style>
